<template>
  <div>
    <a-card title="结业换证报名信息维护">
      <a-form layout="inline" :form="form" @submit="handleSubmit">
        <a-form-item label="学号">
          <a-input v-decorator="['studentId']" placeholder="输入学号" />
        </a-form-item>
        <a-form-item label="姓名">
          <a-input v-decorator="['name']" placeholder="输入姓名" />
        </a-form-item>
        <a-form-item label="状态">
          <a-select v-decorator="['status']" placeholder="选择状态" style="width: 120px">
            <a-select-option value="all">全部</a-select-option>
            <a-select-option value="pending">待审核</a-select-option>
            <a-select-option value="approved">已通过</a-select-option>
            <a-select-option value="rejected">未通过</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">查询</a-button>
        </a-form-item>
      </a-form>
      
      <div style="margin-top: 16px">
        <a-button type="primary" @click="showAddModal" style="margin-right: 8px">新增</a-button>
        <a-button @click="exportData">导出</a-button>
      </div>
      
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="{ pageSize: 10 }"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        style="margin-top: 16px"
      >
        <template slot="status" slot-scope="text">
          <a-badge :status="text === '已通过' ? 'success' : text === '待审核' ? 'processing' : 'error'" :text="text" />
        </template>
        <template slot="action" slot-scope="text, record">
          <a @click="editRecord(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="deleteRecord(record)">删除</a>
        </template>
      </a-table>
    </a-card>
    
    <a-modal
      title="新增报名信息"
      :visible="addModalVisible"
      @ok="handleAddOk"
      @cancel="handleAddCancel"
      :width="800"
    >
      <a-form :form="addForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="学号">
          <a-input v-decorator="['studentId', { rules: [{ required: true, message: '请输入学号' }] }]" />
        </a-form-item>
        <a-form-item label="姓名">
          <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入姓名' }] }]" />
        </a-form-item>
        <a-form-item label="学院">
          <a-select v-decorator="['college', { rules: [{ required: true, message: '请选择学院' }] }]">
            <a-select-option value="信息工程系">信息工程系</a-select-option>
            <a-select-option value="电子工程学院">电子工程学院</a-select-option>
            <a-select-option value="机械工程学院">机械工程学院</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="专业">
          <a-input v-decorator="['major', { rules: [{ required: true, message: '请输入专业' }] }]" />
        </a-form-item>
        <a-form-item label="状态">
          <a-select v-decorator="['status', { rules: [{ required: true, message: '请选择状态' }] }]">
            <a-select-option value="待审核">待审核</a-select-option>
            <a-select-option value="已通过">已通过</a-select-option>
            <a-select-option value="未通过">未通过</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="未通过课程">
          <a-select
            mode="tags"
            v-decorator="['failedCourses']"
            placeholder="选择未通过课程"
          >
            <a-select-option v-for="course in courses" :key="course" :value="course">
              {{ course }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '学号',
    dataIndex: 'studentId',
    key: 'studentId'
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '学院',
    dataIndex: 'college',
    key: 'college'
  },
  {
    title: '专业',
    dataIndex: 'major',
    key: 'major'
  },
  {
    title: '报名时间',
    dataIndex: 'applyTime',
    key: 'applyTime'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

const data = [
  {
    key: '1',
    studentId: '20230101',
    name: '刘洋',
    college: '信息工程系',
    major: '计算机科学与技术',
    applyTime: '2023-05-10 14:30:22',
    status: '待审核',
    failedCourses: ['高等数学(下)', '大学物理(上)']
  },
  {
    key: '2',
    studentId: '20230102',
    name: '赵宇',
    college: '信息工程系',
    major: '软件工程',
    applyTime: '2023-05-11 09:15:33',
    status: '已通过',
    failedCourses: ['线性代数']
  },
  {
    key: '3',
    studentId: '20230103',
    name: '周婷',
    college: '电子工程学院',
    major: '电子信息工程',
    applyTime: '2023-05-09 16:20:45',
    status: '未通过',
    failedCourses: ['电路分析', '模拟电子技术']
  }
]

const courses = [
  '高等数学(上)',
  '高等数学(下)',
  '线性代数',
  '概率论与数理统计',
  '大学物理(上)',
  '大学物理(下)',
  '电路分析',
  '模拟电子技术',
  '数字电子技术',
  'C语言程序设计',
  '数据结构',
  '操作系统',
  '计算机网络'
]

export default {
  beforeCreate() {
    this.form = this.$form.createForm(this)
    this.addForm = this.$form.createForm(this)
  },
  data() {
    return {
      columns,
      data,
      courses,
      selectedRowKeys: [],
      addModalVisible: false
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          // 实际应用中这里应该是API调用
        }
      })
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    showAddModal() {
      this.addModalVisible = true
    },
    handleAddOk() {
      this.addForm.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          this.data.push({
            key: (this.data.length + 1).toString(),
            ...values,
            applyTime: new Date().toLocaleString()
          })
          this.addModalVisible = false
          this.addForm.resetFields()
          this.$message.success('新增成功')
        }
      })
    },
    handleAddCancel() {
      this.addModalVisible = false
      this.addForm.resetFields()
    },
    editRecord(record) {
      console.log('编辑:', record)
    },
    deleteRecord(record) {
      this.$confirm({
        title: '确认删除这条记录吗?',
        content: '删除后将无法恢复',
        onOk: () => {
          this.data = this.data.filter(item => item.key !== record.key)
          this.$message.success('删除成功')
        }
      })
    },
    exportData() {
      this.$message.info('导出功能将在实际应用中实现')
    }
  }
}
</script>